<template>
	<uni-popup ref="popup">
		<view class="popue">
			<uni-forms ref="formRef" :modelValue="formData" :rules="rules" label-align="right" :label-width="100">	
				<uni-forms-item label="缩略图" name="tmpurl" required>
					<select-one-img :width="220"  v-model:formData="formData"></select-one-img>
				</uni-forms-item>
				
				<uni-forms-item label="url" name="url" required>
					<uni-easyinput type="text" v-model="formData.url" 
					placeholder="请输入跳转地址" />
				</uni-forms-item>
				
				<uni-forms-item label="排序" name="sort" required>
					<uni-easyinput type="number" v-model.number="formData.sort" 
					placeholder="请输入排序" />
				</uni-forms-item>
				
				<uni-forms-item label="是否启用" name="checked" style="display: flex; align-items: center;">
					<switch :checked="formData.checked" style="transform:scale(0.6);transform-origin: left center;" @change="checkedChange"/>
				</uni-forms-item>	
				
				
				<uni-forms-item label="类型" name="target" style="display: flex; align-items: center;">
					<uni-data-checkbox v-model="formData.target" :localdata="targets" />
				</uni-forms-item>
				
				<uni-forms-item label="站外appid" name="appid" 
				v-if="formData.target == 'miniProgram'" :required="formData.target == 'miniProgram'">
					<uni-easyinput type="text" v-model="formData.appid"
					placeholder="请输入站外appid" />
				</uni-forms-item>
			
				<uni-forms-item >
					<view class="popueBtnGroup">
						<button size="mini" type="primary" @click="submit">确认</button>
						<button size="mini" type="default" @click="close">取消</button>
					</view>					
				</uni-forms-item>
			</uni-forms>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref } from 'vue';
import { showToast, uploadFileItem } from '@/utils/common'
import { cloudToHttps } from '../../../utils/tools';

const activityCloudObj = uniCloud.importObject('admin-activity-banner', {customUI:true});

const popup = ref(null);
const formRef = ref(null);
const emits = defineEmits(['success'])
const props = defineProps(['item']);
const formData = ref({
	picurl: '',
	url: '',
	sort: 0,
	checked: true,
	target: 'self',
	appid: '',
	tmpurl: ''
});

const targets = ref([{
	text: '站内',
	value: "self"
},{
	text: '站外',
	value: "miniProgram"
}])

const rules = ref({
	url:{
		rules:[
			{
				required: true,
				errorMessage: '请填写url地址',
			}			
		],
		label:"url地址"
	},
	tempurl:{
		rules:[
			{
				required: true,
				errorMessage: '请选择图片',
			}			
		],
		label:"图片选择"
	},
	appid:{
		rules:[
			{
				required: true,
				errorMessage: '请填写appid',
			}			
		],
		label:"外站appid"
	}
})

//数据提交
const submit = async ()=> {
	try {
		await formRef.value.validate();
		uni.showLoading();
		if(formData.value.tmpurl && formData.value.tmpurl != formData.value.picurl) {
			let file = await uploadFileItem(formData.value.tmpurl);
			formData.value.picurl = cloudToHttps(file.fileID);
		}
		let  {tmpurl, ...params} = formData.value;
		let {errCode, errMsg} = await activityCloudObj.add(params);
		if (errCode != 0) showToast({title: errMsg});
		showToast({title: '发布成功'});
		close();
		emits("success")
	} catch(e) {
		console.log(e);
	} finally {
		uni.hideLoading();
	}
}

const open = () => {
	console.log("此处被调用了");
	popup.value.open();
}

const checkedChange = (e) => {
	formData.value.checked = e.detail.value;
}

const close = () => {
	popup.value.close();
	init();
}

const init = ()=>{
	formData.value = {
		picurl:"",
		url:"",
		sort:0,
		checked:true,
		target:"self",
		appid:"",
		tmpurl:""
	}	
}

defineExpose({
	open,
	close
});
</script>


<style lang="scss" scoped>
.popue {
	width: 600px;
	min-height: 300px;
	background-color: #fff;
	padding: 50px 50px 50px 20px;
}

</style>
